import React from 'react'
import classnames from 'classnames'
import styles from './index.module.less'

export default ({ menu, handleMenuClick, collapsed }) => {
  return (
    <div className={styles["sidebar-lefter"]}>
      <div className={styles["logo-con"]}>
        <img className={styles.logo} src="https://test-omo.aiyouyi.cn/web-file/2/image/33712/fa209d880ccb4351b11643ee87655f5f.jpg" />
      </div>
      <ul className={styles["list"]}>
        {menu?.children?.map(({ id, title, icon = "https://test-omo.aiyouyi.cn/bp/static/icons/profiles.png" }) => (
          <li className={id == menu.active ? styles['active'] : ''} title={title} key={id} onClick={() => handleMenuClick(menu.id, id)}>
            <img className={styles["icons"]} src={icon} />
            <span className={classnames({ [styles["mul-line-truncate"]]: true, [styles["collapsed"]]: collapsed })}>{title}</span>
          </li>
        ))}
      </ul>
    </div>
  )
}